<template>
	<div class="softbypass">
		<div class="page-title">
			<h3>软件bypass</h3>
			<ul class="oper-butn" >
				<li class="seleAll" data-placement="bottom" v-on:click="toggleAllCheck()" >
					<template v-if='selectedItems.length<tableData.length||tableData.length==0'>
						<img src="../../../img/selectall.png">
						<span>全选</span>
					</template>	
					<template v-else>
						<img src="../../../img/cancel.png" />
						<span>取消全选</span>	
					</template>	
				</li>
				<li @click='addbypass()'>
					<img src="../../../img/add.png" />
					<span>新增</span>
				</li>
				<li v-on:click='delArr()' class="deletetag" data-placement="bottom">				
					<img src="../../../img/delete.png" />
					<span>删除</span>
				</li>				
				
			</ul>
		</div>
		<div class="content">
			<ul class="roadul" v-if="tableData.length>0">
				<transition-group name="list">
					<li v-for='(item ,index) in tableData'  v-bind:key="index">
						<p class="roads">线路{{item}}</p>
						<span class="isbypass">bypass</span><br />
						<input type="checkbox" :checked = "rowSelected(item)" @click="toggleCheck(item)"><span class="dele" @click="delOne(item)">删除</span>
					</li>
				</transition-group>
			</ul>
			<p v-else class="no-data">暂未设置软件bypass，请添加。</p>
		</div>
		<Modals 
			:id ="'bypassmodal'" 
			:title ="name" 
			:field = 'field' 
			:collectField = "collectField"
            :status = "result" 
			:errorMsg="errorMsg" 
			:type="type"
            :selectedItems="selectedItems" 
			:editData = "edit_data"  
			@sentErrorMsg = "getErrorMsg"
            @addEvent ="addData"
			@delEvent = "delDada"
			>
		</Modals>
	</div>
</template>
<script>
	import netService from 'services/netService'
	import SystemService from 'services/systemService'
	import Modals from 'components/common/Modals'
	export default {
		components: {
			Modals
		},
		data() {
			return {
				transfer:true,
				name:'软件bypass',
				type:'add',
				tableData:[],
                show: true,
				allroutes:[],
				result:'',
                errorMsg:'',
				selectedItems:[],
				field:[{
					type:'select',
					label:'选择线路',
					emums:[],
					name:'group',
					requried:true,  
					remark:'*必选'  
				}],
				edit_data:{
					group:null	
				},
				collectField:'group',
			}
		},
		mounted() {
			this.getData()
			this.getGroups()
		},
        methods: {
        	reset() {
				this.result = ''
				this.errorMsg = ''
				$('.modal input').val('').css('border', '1px solid #e8e8e8')
				$('.modal textarea').val('').css('border', '1px solid #e8e8e8')
				$('.mi').css('color', '#d2d2d2')
				$('.notice').hide()
				$('.inputs_wrap .error_foramt').removeClass('error_foramt')
			},
			getErrorMsg(msg) {
                this.errorMsg = msg
			},
			getGroups() {
				SystemService.getLine()
				.then((res) => {		
					if (res.errcode === 0) {
                        this.field[0].emums = res.group_id.map((item)=>{
                            return  '线路' + item
						})
                    }
				})
			},
			getData() {
				netService.getBypass()
				.then((res) => {	
					if (res.errcode === 0) {
						this.tableData =res['29']? res['29'].split(','):[]
					}
				})
			},
			addbypass() {
				this.reset()
				this.type='add'
				this.result = ''
				this.edit_data={}
				$("#bypassmodal").modal('show')
			},
			addData(params){
				let confg = params.group.replace(/[^0-9]/ig,'')
				this.result = 'ing'
				netService.addBypass(confg)
				.then((res) => {	
					if (res.errcode === 0) {
						this.result = 'ok'
						$('#bypassmodal').modal('hide')
						this.getData()
					}else {
						this.result = 'error'
						this.errorMsg=res.errorMessage
					}
				})
			},
			delArr(){	
				this.type = 'del'
				if(this.selectedItems.length>0){
					$('#bypassmodal').modal('show')
				}else if(this.tableData.length==0){
					this.popoverShow('.deletetag', '没有可选的内容')
				}else{
					this.popoverShow('.deletetag', '请选择要删除的内容')
				}			
			},
			delOne(item) {
				this.type = 'del'
				this.selectedItems = [item]
				$('#bypassmodal').modal('show')
			},
			delDada(){
				let ids =  this.selectedItems.join(',')
				this.result = 'ing'
				netService.delBypass(ids)
				.then((res) => {	
					if (res.errcode === 0) {
						this.result = 'ok'
						$('#bypassmodal').modal('hide')
						this.selectedItems = []
						this.getData()
					}else{
						this.result = 'error'
						this.errorMsg=res.errorMessage
					}
				})
			},
			toggleAllCheck(){
				if(this.tableData.length==0){
					this.popoverShow('.seleAll', '没有可选的内容')
				}else if (this.selectedItems.length < this.tableData.length) {
					this.selectedItems = this.tableData
				} else {
					this.selectedItems = []
				}
			},
			rowSelected(Item) {
				let exist = false
				for(let [v,k] of this.selectedItems){
					if(Item == v){
						exist =  true					
					}
				}
				return exist
			},
			toggleCheck(Item){
				if(this.selectedItems>0){
					for(let [v,k] of this.selectedItems){
						if(Item==v){
							this.selectedItems.splice(k,1)
						}else{
							this.selectedItems.push(Item)
						}
					}
				}else{
					this.selectedItems.push(Item)
				}
			},
            popoverShow(ele, content) {
				$(ele).attr({
					'data-toggle': 'popover',
					'data-content': content
				})
				$(ele).popover('show')
				setTimeout(function() {
					$(ele).popover('destroy')
				}, 1000)
			},
	
		}
	}
</script>